<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>

<body>
  <div id="container">
    <p>{{ test }}</p>
  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el: "#container",
      template: "<div id='container'><h1>{{test}}</h1></div>",
      data: {
        test: "hello world"
      },
      watch: {
        test: function () {
          console.log('wantch:test发生变化')
        }
      },
      beforeCreate: function () {
        console.log(this);
        showData("创建vue实例前", this);
      },
      created: function () {
        showData("创建vue实例后", this);
      },
      beforeMount: function () {
        showData("挂载到dom前", this);
      },
      mounted: function () {
        showData("挂载到dom后", this);
      },
      beforeUpdate: function () {
        showData("数据变化更新前", this);
      },
      updated: function () {
        showData("数据变化更新后", this);
      },
      beforeDestroy: function () {
        vm.test = "3333";
        showData("vue实例销毁前", this);
      },
      destroyed: function () {
        showData("vue实例销毁后", this);
      }
    });

    function realDom() {
      console.log(
        "真实dom结构：" + document.getElementById("container").innerHTML
      );
    }
    function showData(process, obj) {
      console.log(process);
      console.log("data 数据：" + obj.test);
      console.log("挂载的对象：");
      console.log(obj.$el);
      realDom();
      console.log("------------------");
    }
  </script>
</body>

</html>